// =============================================================================
//
//      FORMULAR-DEFINITINON
//
// =============================================================================


form {


    //  Plazierungen
    // =========================================================================
    &.form-bg {
        margin: $magic-number-half-unit 0;
        padding: $magic-number-half-unit;
    }
    fieldset {
        margin: $magic-number-half-unit 0;
        padding: $magic-number-half-unit;
        @include clearfix;
        legend {}
        label, input[type="text"], input[type="password"], textarea, select {
            float: left;
        }
        label {
            padding: 6px 3px;
        }
        // Eingabe-Felder
        input[type="text"], input[type="password"], textarea, select {
            font: inherit;
            padding: 7px 3px;
            &:focus, &:hover {}
        }
        // Buttons
        button, input[type="submit"], input[type="button"], input[type="reset"] {
            cursor: pointer;
            display: inline-block;
            padding: 0;
            text-align: center;
            position: relative;
        }
        // einzeilige Formulare: Input direkt gefolgt von Button
        &.form-one-line {
            padding: 0 $magic-number-half-unit $magic-number-half-unit;
            input, button {
                float: none !important;
                margin: $magic-number-half-unit 0 0 !important;
                vertical-align: baseline;
            }
        }
        // formular-zeile: enthaelt Label und Formular-Elemente
        .form-row {
            margin: $magic-number-quarter-unit 0;
            padding: $magic-number-half-unit 0 $magic-number-quarter-unit;
            @include clearfix;
            &:first-of-type { }
        }
        // Radio/Checkbox-Konstruktionen
        .form-chra {
            @extend .form-row
        }
        .form-chra {
            input[type="checkbox"], input[type="radio"] {
                margin: 7px 5px 5px 0;
                float: left;
                clear: both;

            }
            div {
                float: left;
            }
            label {
                float: left;
                @include clearfix;
                input[type="checkbox"], input[type="radio"] {
                    margin-top: 0;
                }
            }
        }
    }


    //  Design
    // =========================================================================
    &.form-bg {
        background: $color-bg-notify;
    }
    fieldset {
        @include border-def;
        @include border-radius;
        legend {
            font-weight: bold;
            color: lighten($color-font,15%);
        }
        /* Eingabe-Felder */
        input[type="text"], input[type="password"], textarea, select {
            color: lighten($color-font,25%);
            background: $color-bg-none;
            border: {
                color: darken($color-border,15%) $color-border $color-border darken($color-border,15%);
                style: solid;
                width: 1px;
            }
            @include border-radius;
            &:focus, &:hover {
                color: $color-font;
                border-color: darken($color-border,25%) darken($color-border,10%) darken($color-border,10%) darken($color-border,25%);
            }
        }
        /* Buttons */
        button, input[type="submit"], input[type="button"], input[type="reset"] {
            color: lighten($color-font, 15%);
            font-weight: bold;
            background: #EDEDED;
            padding: 0.4em 0.5em;
            @include border-def;
            @include border-radius;
            &:hover, &:focus {
                color: $color-font;
                background: darken($color-bg-base,3%)
            }
            &.form-button-cancel {
                color: $color-font-contrast;
                background: $color-bg-error;
                border-color: $color-border-error;
                &:hover, &:focus {
                    background: lighten($color-bg-error,4%);
                }
            }
        }
        /* formular-zeile: enthaelt Label und Formular-Elemente */
        .form-row {
            border-top: 1px solid $color-border;
            &:first-of-type {
                border-width: 0;
            }
        }
        /* nach einer horizontalene Linie bekommt die Formularzeile keinen Rahmen */
        hr {
            & + .form-row, & + .form-chra {
                border-width: 0;
            }
        }
        /* Pflichtfeld */
        input.form-mandatory {
            border-right: 5px solid $color-border-error !important;
        }
        /* Fehleingabe */
        input.form_error {
            @if lightness($color-bg-error) > 40 {
                color: $color-font-contrast;
            } @else {
                color: $color-font;
            }
            background: $color-bg-error;
        }

        // Breiten-Definitionen
        //      Standardmaessig: Label Links, Form-Elements rechts
        // ---------------------------------------------------------------------
        @include form_arrange(38.2%)
    }


}


.form-notification, .form-notification-error, .form-notification-confirm {
    text-shadow: 1px 1px 1px #ffffff;
    margin: $magic-number-half-unit 0;
    padding: $magic-number-half-unit;
    @include border-def;
    @include border-radius;
    p {
        margin-top: 0;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
.form-notification {
    background: $color-bg-notify;
}
.form-notification-error {
    background: $color-bg-error;
}
.form-notification-confirm {
    background: $color-bg-confirm;
}

